<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
            div(class="title") ----闹铃设置----
            div(class="containers")
                div(class="left")
                    i(class="iconfont clock-icon") &#xe609;
                div(class="right")
                    div(class="times")
                        span(:class="{'active-block': activeId == 0 ? true : false}") {{hour | fixed}}
                        span(class="flex-row-item center",style="flex:0") :
                        span(:class="{'active-block': activeId == 1 ? true : false}") {{minute | fixed}}
                    div(class="dates")
                        control-select(v-model="ringState", :working="activeId == 2",ref="state")
</template>

<script>
import Base from "@/mixins/BaseVue";
export default {
  mixins: [Base],
  data() {
    return {
      hour: window.machine.ring.hour,
      minute: window.machine.ring.minute,

      activeId: 0,

      ringState: {
        value: window.machine.ring.state,
        options: [
          { name: "关闭", value: "closed" },
          { name: "每日", value: "every" },
          { name: "一次", value: "once" }
        ],
        onChange(model) {
          window.machine.ring.state = model.value;
        }
      }
    };
  },
  methods: {
    up() {
      if (this.activeId == 0) {
        const hour = parseInt(this.hour);
        this.hour = hour == 23 ? 0 : hour + 1;
      }
      if (this.activeId == 1) {
        const minute = parseInt(this.minute);
        this.minute = minute == 60 ? 0 : minute + 1;
      }
      if (this.activeId == 2) {
        this.$refs.state.up();
      }
    },
    down() {
      if (this.activeId == 0) {
        const hour = parseInt(this.hour);
        this.hour = hour == 0 ? 23 : hour - 1;
      }
      if (this.activeId == 1) {
        const minute = parseInt(this.minute);
        this.minute = minute == 0 ? 60 : minute - 1;
      }
      if (this.activeId == 2) {
        this.$refs.state.down();
      }
    },

    back() {
      window.machine.ring.hour = this.hour;
      window.machine.ring.minute = this.minute;
      this.$router.push({ path: "index", query: { index: 1 } });
    },
    yes() {
      window.machine.ring.hour = this.hour;
      window.machine.ring.minute = this.minute;
      this.activeId = this.activeId == 2 ? 0 : this.activeId + 1;
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
}
.containers {
  clear: both;
  @left_width: 63px;
  .left {
    width: @left_width;
    float: left;
    text-align: right;
  }
  .right {
    width: 90px;
    float: left;

    .times,
    .dates {
      text-align: center;
      margin: 5px 0;
      font-size: 16px;
    }
  }
}
.clock-icon {
  @size: 50px;
  //   width: @size;
  //   height: @size;
  font-size: @size;
}
</style>